<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Test</title>
</head>
<body>
    <div>
        <h1>The Ajax 01 Page</h1>
        <button onclick="doAjaxStart()">Ajax Get Request Start</button>
        <span id="result"></span>
    </div>

    <script>
        function doAjaxStart(){//JS中问题的调试-日志，debugger，排除法
            // debugger  //在浏览器控制台打开状态下断点才会生效
            //1.create xhr对象(此对象是ajax应用的入口对象)
            var xhr = new XMLHttpRequest();
            //2.设置监听状态(监听客户端与服务端的通讯过程)
            xhr.onreadystatechange=function () {//此函数在客户端与服务端的通讯状态发生变化时执行
                if (xhr.readyState == 4 && xhr.status == 200) {//4 表示服务端响应到客户端结果，客户端已接收完成
                    //200 表示服务端处理请求的过程是ok的
                    //xhr.responseText 获取服务端响应到客户端的文本信息
                    document.getElementById("result").innerHTML = xhr.responseText
                }
            }
            //3.建立一个与服务端指定的url连接
            xhr.open("GET","http://localhost:8080/doAjaxStart",true)//true表示异步请求
            //4.发送请求
            xhr.send(null)//这个请求交给谁去发送？(ajax 引擎)
        }
    </script>
</body>
</html>